<template>
    <div style="width: 100%; min-width: 1620px;">
        <!-- 今日进件总览 -->
        <div>
            <div class="style">
                <span>{{$i18n.t('TODAY_INOUT_OVERVIEW')}}</span>
            </div>
            <input-overview :firstPush="firstPush" :secondPush="secondPush" :riskPassRate="riskPassRate" :loading="loading" />
        </div>
        <!-- 今日审核总览-->
        <div>
            <div class="style">
                <span>{{$i18n.t('TODAY_APPROVE_OVERVIEW')}}</span>
            </div>
            <approve-overview :approve="approve" :loading="loading"></approve-overview>
        </div>
        <!--        今日放款总览-->
        <div>
            <div class="style"><span>{{$i18n.t('TODAY_LOANED_OVERVIEW')}}</span></div>
            <loan-over-view :loan="loan" :conversion="conversion" :loading="loading"></loan-over-view>
        </div>
        <div class="test">
            <!--            今日预提醒总览-->
            <div style="width:49%">
                <div class="style"><span>{{$i18n.t('TODAY_REMIND_OVERVIEW')}}</span></div>
                <notice-overview :notice="loaned" :loading="loading"></notice-overview>
            </div>
            <!--            今日催收总览-->
            <div style="width: 49%">
                <div class="style"><span>{{$i18n.t('TODAY_COLLECTION_OVERVIEW')}}</span></div>
                <collection-overview :collection="collection" :loading="loading"></collection-overview>
            </div>
        </div>
        <!--        历史数据总览-->
        <div class="style" style="height:35px;line-height: 35px">
            <span>{{ $i18n.t('HISTORY_DATA_OVERVIEW') }}</span>
            <el-switch v-model="switchValue" active-color="#91C7AE" inactive-color="#CCCCCC" style="margin-left: 10px"></el-switch>
            <span style="margin-left: 10px">{{ switchValue=== true ? $i18n.t('CONVERSION_OF_INDIAN_RUPEE'): $i18n.t('CONVERSION_OF_RMB') }}</span>
            <el-tag type="success" style="margin-left: 10px">{{ $i18n.t('AT_PRESENT_EXCHANGE_RATE') }}</el-tag>
            <span>{{ $i18n.t('EXCHANGE_RATE')}} = 1:{{ historyData.exchange_rate }}</span>
        </div>
        <history-overview :data="historyData" :switchValue="switchValue" ></history-overview>
    </div>
</template>

<script>
    import { getWorkplace, getHistory } from '@/api/dashboard'
    import InputOverview from './components/InputOverview'
    import ApproveOverview from './components/ApproveOverview'
    import LoanOverView from './components/LoanOverView'
    import NoticeOverview from './components/NoticeOverview'
    import CollectionOverview from './components/CollectionOverview'
    import HistoryOverview from './components/HistoryOverview'

    export default {
        name: 'workplace',
        data () {
            return {
                switchValue: false,
                loading: false,
                loaned: { total: 0, data: [] },
                collection: { total: 0, data: [] },
                conversion: { total: 0, data: [] },
                historyData: {
                    user_num: 0,
                    full_num: 0,
                    order_num: 0,
                    pay_order_num: 0,
                    conversion_rate: 0,
                    CNY: {
                        pay_amount: 0,
                        repay_amount: 0,
                        no_repayment_amount: 0,
                        current_amount: 0,
                        current_order_num: 0,
                        current_overdue_order_num: 0
                    },
                    IDR: {
                        pay_amount: 0,
                        repay_amount: 0,
                        no_repayment_amount: 0,
                        current_amount: 0,
                        current_order_num: 0,
                        current_overdue_order_num: 0
                    },
                    exchange_rate: 0
                },
                firstPush: { total: 0, data: [] },
                secondPush: { total: 0, data: [] },
                riskPassRate: { total: 0, data: [] },
                approve: {
                    total: 0,
                    waitApprove: 0,
                    approveComplete: 0,
                    newApprovePassRate: 0,
                    oldApprovePassRate: 0,
                    approvePassRate: 0,
                    approveReject: 0,
                    approveCancel: 0
                },
                loan: { total: 0, data: [] }
            }
        },
        components: {
            InputOverview,
            ApproveOverview,
            LoanOverView,
            NoticeOverview,
            CollectionOverview,
            HistoryOverview
        },
        methods: {
            getDashboard () {
                // 获取工作台图表数据
                getWorkplace().then((res) => {
                    this.loading = true
                    const { firstPush, secondPush, riskPassRate, approve, loan, conversion, loaned, collection } = res.result
                    this.firstPush = firstPush
                    this.secondPush = secondPush
                    this.riskPassRate = riskPassRate
                    this.approve = approve
                    this.loan = loan
                    this.conversion = conversion
                    this.loaned = loaned
                    this.collection = collection
                }).catch(() => {}).finally(() => {
                    this.loading = false
                })
                // 获取历史数据
                getHistory().then((res) => {
                    this.historyData = res.result
                }).catch((e) => {})
            }
        },
        created () {
            this.getDashboard()
        }
    }
</script>

<style scoped lang="less">
    .style{
        width: 100%;
        height: 24px;
        background-image: linear-gradient(to right, #108EE9,#86CF68);
        margin-bottom: 10px;
        color: white;
        font-weight: bold;
        padding-left: 20px;
        line-height: 25px;
    }
    .test{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 20px;
    }
</style>
